<template>
  <view class="shoplist">
    <!-- 循环列表 -->
    <view class="neirong" @tap="goShopDetail($event)">
      <view class="shopitem" v-for="(item, index) in shopList" :key="item.goods_id" :data-goods_id="item.goods_id" data-name="goodsitem">
        <view class="img" :data-goods_id="item.goods_id" data-name="goodsitem">
          <img :src="item.goods_small_logo" alt="图片加载失败!" :data-goods_id="item.goods_id" data-name="goodsitem"/>
        </view>
        <view class="text" :data-goods_id="item.goods_id" data-name="goodsitem">
          <view class="shoptitle" :data-goods_id="item.goods_id" data-name="goodsitem">
            {{item.goods_name}}
          </view>
          <view class="shopprice" :data-goods_id="item.goods_id" data-name="goodsitem">
            <view class="price" :data-goods_id="item.goods_id" data-name="goodsitem">
              ￥{{item.goods_price}}
            </view>
            <view class="count" :data-goods_id="item.goods_id" data-name="goodsitem">
              x {{item.goods_number}}
            </view>
          </view>
        </view>
      </view>
      <view class="bottoms" v-if="chudi">
        已经到底了!
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        query:{
          pagenum:1,
          pagesize:10
        },
        total:0,
        shopList:[],
        searchKey:{},
        chudi:false,
      }
    },
    onLoad(options){
      this.getShopList(options);
      this.searchKey = options;
    },
    methods: {
      async getShopList(key){
        // &cid=${key.catid}
        let {data} = await uni.$http.get(`goods/search?query=${key.keyword}&pagenum=${this.query.pagenum}&pagesize=${this.query.pagesize}`);
        if(data.meta.status !== 200) return wx.showToast({title:"获取数据失败！"});
        this.shopList = data.message.goods;
        this.total = data.message.total;
        // console.log(data.message.goods);
      },
      onReachBottom () {
        if(this.query.pagesize < this.total){
          if((this.query.pagesize + 10) >= this.total){
            this.query.pagesize = this.total
          }else{
            this.query.pagesize = this.query.pagesize + 10
          }
          setTimeout(() => {
            if(this.query.pagesize >= this.total) this.chudi = true
          }, 1000)
          this.getShopList(this.searchKey)
        }
      },
      goShopDetail(e){
        let data = e.target.dataset;
        if(data.name !== 'goodsitem') return
        wx.navigateTo({url:'/pages/shopdetail/shopdetail?goods_id='+data.goods_id})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .shoplist{
    .neirong{
      box-sizing: border-box;
      margin: 0 8rpx;
      .shopitem{
        display: flex;
        border-bottom: 1px solid #ccc;
        height: 220rpx;
        box-sizing: border-box;
        padding: 15rpx 35rpx;
        .img{
          width: 180rpx;
          height: 180rpx;
          padding-right: 10rpx;
          img{
            width: 180rpx;
            height: 180rpx;
            border-radius: 18rpx;
          }
        }
        .text{
          .shoptitle{
            height: 135rpx;
            font-size: 25rpx;
            font-weight: 600;
          }
          .shopprice{
            display: flex;
            justify-content: space-between;
            .price{
              color: #d00;
              font-weight: 600;
              font-size: 32rpx;
              line-height: 45rpx;
            }
            .count{
              font-size: 25rpx;
              line-height: 45rpx;
            }
          }
        }
      }
      .bottoms{
        text-align: center;
        line-height: 60rpx;
        height: 60rpx;
      }
    }
  }
</style>
